<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<view v-if="isConnected && isRefresh" class="content-box">
			<!-- 导航栏 -->
			<shopro-navbar :isBack="false" :isOrder="5">
				<view class="u-flex-1 u-flex u-col-center" slot="content">
					<u-search shape="square" action-text="" :disabled="true"
						@click="$Router.push({ path: '/pages/index/huixuan_good', query: { id: '' } })"
						:action-style="{'display':'none'}" placeholder="请输入关键字" :showAction="false" height="60">
					</u-search>
					<view class="u-flex right-solt">
						<view class="goshopcar" @click="$Router.push('/pages/index/cart') ">
							<image style="width: 36rpx;height: 36rpx;" src="https://d-duomi.bigchun.com/images/Frame.png"></image>
							<text class="gouwuche">购物车</text>
						</view>
						<!--            <view class="goqiandao">-->
						<!--              <image style="width:  54rpx;height:  52rpx;" src="https://d-duomi.bigchun.com/images/Group1898.png"></image>-->
						<!--            </view>-->
					</view>
				</view>

			</shopro-navbar>
			<!-- 自定义模块 -->
			<view class="template-box">
				<view class="shop-card">
					<image @click="$Router.push({ path: '/pages/index/duomicategory', query: { name: '商帮自营' } })"
						style="width: 338rpx;height: 160rpx;" src="https://d-duomi.bigchun.com/images/back6.png"></image>
					<image @click="$Router.push({ path: '/pages/index/duomicategory', query: { name: '商帮超市' } })"
						style="width: 338rpx;height: 160rpx;" src="https://d-duomi.bigchun.com/images/back5.png"></image>
				</view>
				<block v-for="(item, index) in homeTemplate" :key="item.id">
					<!-- 滑动宫格 -->
					<!-- <huixuan-classify v-if="item.type === 'menu'" :list="item.content.list"></huixuan-classify> -->
					<!-- 轮播 -->
					<sh-banner v-if="item.type === 'banner' && index !== 0" :Px="item.content.x" :Py="item.content.y"
						:borderRadius="item.content.radius" :height="300" :list="item.content.list"></sh-banner>
					<!--          限时秒杀-->
					<view class="activity" v-if="item.type=='miaosha'"
						style=" background: url('https://d-duomi.bigchun.com/images/Frame111.png') no-repeat!important;background-size: 100%;">
						<huixuan-exercise class="seckill-card-xianshi" :title="'镇店之宝'" :detail="item.content" :isVip="isVip">
						</huixuan-exercise>
					</view>
					<!--          新品预售-->
					<view class="activity" v-if="item.type=='yushou'"
						style="  background: url('https://d-duomi.bigchun.com/images/Frame110.png') no-repeat!important;background-size: 100%;">
						<huixuan-exercise class="seckill-card-dazhe" :title="'新品预售'" :detail="item.content" :isVip="isVip">
						</huixuan-exercise>
					</view>
					<!--          热销专区-->
					<view class="activity activityr" v-if="item.type=='rexiao'"
						style=" background: url('https://d-duomi.bigchun.com/images/Frame109.png') no-repeat!important;background-size: cover!important;">
						<huixuan-exercise class="seckill-card-xianshou" :title="'热销专区'" :detail="item.content" :isVip="isVip">
						</huixuan-exercise>
					</view>


				</block>
			</view>

<!--			<search-data :enable="enable" :title="'惠选首页'"></search-data>-->

			<!-- 悬浮按钮 -->
      <shopro-float-btn v-if="is_finshed"></shopro-float-btn>
			<!-- 连续弹窗提醒 -->
			<!-- <shopro-notice-modal v-if="showPrivacy && isLogin"></shopro-notice-modal> -->

		</view>

	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shSearch from './components/sh-search.vue';
	import shCategoryTabs from './components/sh-category-tabs.vue';

	import homeHead from './index/home-head.vue';

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import HuixuanClassify from "../../components/huixuan-classify/huixuan-classify";
	import HuixuanExercise from "../../components/huixuan-exercise/huixuan-exercise";
	export default {
		components: {
			HuixuanExercise,
			HuixuanClassify,
			shBanner,
			shGridSwiper,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,
			shCategoryTabs,
			homeHead,
			// #ifdef MP-WEIXIN
			shLive
			// #endif
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isVip:0,
				isRefresh: true,
				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //是都有资格领取优惠券
				isScorll: false,
				homeTemplate: [{
						"id": 15424,
						"type": "menu",
						"category": "home",
						"name": "菜单组",
						"content": {
							"name": "",
							"style": 4,
							"list": []
						},
						"decorate_id": 1
					},
					{
						"id": 15423,
						"type": "banner",
						"category": "home",
						"name": "轮播图",
						"content": {
							"name": "",
							"style": 1,
							"height": 120,
							"radius": 10,
							"x": 20,
							"y": 10,
							"list": []
						},
						"decorate_id": 1
					},
					{
						"id": 15427,
						"type": "miaosha",
						"category": "home",
						"name": "秒杀",
						"content": {
							"id": 2,
							"name": "秒杀",
							"style": 1,
							"groupon_name": "秒杀",
							"team_num": "3"
						},
						"decorate_id": 1
					},
					{
						"id": 15429,
						"type": "yushou",
						"category": "home",
						"name": "预售专区",
						"content": {
							"id": 2,
							"name": "预售专区",
							"style": 1,
							"groupon_name": "预售专区",
							"team_num": "3"
						},
						"decorate_id": 1
					},
					{
						"id": 15428,
						"type": "rexiao",
						"category": "home",
						"name": "热销专区",
						"content": {
							"id": 2,
							"name": "热销专区",
							"style": 1,
							"groupon_name": "热销专区",
							"team_num": "3"
						},
						"decorate_id": 1
					},


				], //惠选数据模板
        is_finshed:false
			};
		},
		computed: {
			...mapGetters(['isLogin']),
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			let that = this;
			if (this.isLogin) {
				this.getCartList();
				this.getVip()
			}
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			this.init();
		},
    watch: {
      '$store.state.shopro.pink_time':{
        //对数据执行操作
        deep:true,
        immediate: true,
        handler(val,old) {
          if (val>0 && this.$store.state.shopro.is_join == 0 && this.$store.state.shopro.vip_pink_id) {
            this.is_finshed = true
          } else {
            this.is_finshed = false
          }
        }
      },
      '$store.state.shopro.is_join':{
        deep:true,
        immediate: true,
        handler(val,old) {
          if(val == 0&&this.$store.state.shopro.vip_pink_id&&this.$store.state.shopro.pink_time>0){
            this.is_finshed = true
          }else{
            this.is_finshed = false
          }
        }
      },
      '$store.state.shopro.vip_pink_id':{
        immediate: true,
        deep:true,
        handler(val,old) {
          if(val&&this.$store.state.shopro.is_join == 0&&this.$store.state.shopro.pink_time>0){
            this.is_finshed = true
          }else{
            this.is_finshed = false
          }
        }
      },
    },
		created() {
		},
		methods: {
			...mapActions(['getCartList']),
			// 初始化
			init() {
				var that = this;
				that.isRefresh = false;
				that.$https('common.huixuan_template', {
						token: uni.getStorageSync("token"),
					})
					.then(res => {
						if (res.code === 1) {
							uni.stopPullDownRefresh();
							that.isRefresh = true;
							that.homeTemplate.forEach((item, index) => {
								if (item.type == 'banner') {
									item.content.list = res.data.lunbo;
								}
								if (item.type == 'menu') {
									item.content.list = res.data.cate;
								}
								if (item.type == 'miaosha') {
									item.content.list = res.data.miaosha;
								}
								if (item.type == 'rexiao') {
									item.content.list = res.data.rexiao.splice(0,4);
								}
								if (item.type == 'yushou') {
									item.content.list = res.data.yushou;
								}
							})
							if (this.isLogin) {
								this.ishaveYouhui();
							}

							console.log("==========homeTemplate", that.homeTemplate)
						}
					});
			},
			getVip() {
				this.$https('user.isVip').then(res => {
					if (res.code === 1) {
						this.isVip = res.data;
					}
				})
			},
			ishaveYouhui() {
				var that = this;
				that.$https('coupons.get', {
						token: uni.getStorageSync("token"),
					})
					.then(res => {
						if (res.code === 1) {
							if (!res.data.is_get) {
								that.showPrivacy = true;
							}
						}
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.cu-bar .content {
		margin: auto 20rpx;
		width: 450rpx;
	}

	/deep/.right-solt {
		margin-left: 35rpx;
		border-radius: 6rpx;
		padding: 6rpx 4rpx;

		.goshopcar {
			display: flex;
			flex-direction: column;
			align-items: center;
			//width: 200rpx;
			height: 100%;

			.gouwuche {
				font-size: 20rpx;
				height: 24rpx;
				line-height: 30rpx;
			}
		}

		.goqiandao {
			width: 54rpx;
			height: 52rpx;
		}
	}

	/deep/.u-content,
	/deep/.u-input {
		background: #F8F8F8;
	}

	/deep/.cu-bar {
		background: #FAEAEA !important;
		//height: 138rpx!important;
		z-index: 11000;
	}

	.template-box {
		//padding-top: 40rpx;
	}

	/deep/.cu-modal {
		z-index: 11700 !important;
	}

	.activity {
		background-size: 100% 100%;
		margin: 22rpx 22rpx;
		padding: 10rpx 22rpx;
		border-radius: 28rpx;
	}
	.activityr{
		height: 1040rpx;
		// border: 2rpx solid blue;
		background-color: #FFFFFF!important;
	}

	.shop-card {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
